<template>
  <div class="flex flex-col">
    <!-- 快捷操作 -->
    <div v-hasRole="['super_admin', 'platform_admin', 'tenant_admin', 'shop_admin']" class="mb-4"
      ><ShortcutCard
    /></div>
    <!-- 待办事项 -->
    <div v-hasRole="['super_admin', 'platform_admin', 'tenant_admin', 'shop_admin']" class="mb-4"
      ><OperationDataCard
    /></div>
    <div class="flex flex-col lg:flex-row mb-4">
      <div class="ranking lg:w-1/3">
        <!-- 用户消费排行榜 -->
        <MemberConsumeRankingCard />
      </div>
      <div class="ranking mt-3 lg:mt-0 lg:ml-3 lg:w-2/3">
        <!-- 产品销售排行榜 -->
        <ProductSaleRankingCard />
      </div>
    </div>
    <!-- 交易趋势 -->
    <div v-hasRole="['super_admin', 'platform_admin', 'tenant_admin', 'shop_admin']" class="mb-4"
      ><TradeTrendCard
    /></div>
    <!-- 用户趋势 -->
    <div v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']" class="mb-4"
      ><MemberStatisticsCard
    /></div>
  </div>
</template>
<script lang="ts" setup>
import MemberConsumeRankingCard from './components/MemberConsumeRankingCard.vue'
import ProductSaleRankingCard from './components/ProductSaleRankingCard.vue'
import ShortcutCard from './components/ShortcutCard.vue'
import OperationDataCard from './components/OperationDataCard.vue'
import TradeTrendCard from './components/TradeTrendCard.vue'
import MemberStatisticsCard from './components/MemberStatisticsCard.vue'

/** 首页 */
defineOptions({ name: 'Index' })
</script>
<style lang="scss" scoped>
.trend {
  max-height: 400px;
}

.ranking {
  max-height: 550px;
}

:deep(.el-card .el-card__header, .el-card .el-card__body) {
  padding: 15px !important;
}
</style>
